<template>
  <view class="card-container">
    <wd-card class="process-card w-full">
      <view class="time-info mb-8">
        <view>咨询时间：{{ consultationTime }}</view>
      </view>
      <wd-steps :active="activeStep" direction="horizontal">
        <wd-step title="预约"></wd-step>
        <wd-step title="咨询中"></wd-step>
        <wd-step title="咨询结束"></wd-step>
      </wd-steps>
    </wd-card>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

// 定义组件的 props
const props = defineProps<{
  activeStep: number
  consultationTime: string
}>()

// 使用传入的 props
const activeStep = ref(props.activeStep)
const consultationTime = ref(props.consultationTime)
</script>

<style lang="scss" scoped>
.card-container {
  width: 100%;
  max-width: 600px;
  margin: auto;
}

.process-card {
  padding: 20px;
}

.time-info {
  margin-top: 20px;
  font-size: 16px;
}
</style>
